import styled from 'styled-components';
import { Button } from 'antd';

import elecSel from '@/assets/images/archives/elecSel.png';

export const Image = styled.div`
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  background: url(${props => props.defaultSrc}) no-repeat;
  margin-left: 120px;
`

export const TypeText = styled.span`
  display: flex;
  color: #888888;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  margin-top: 13px;
`

export const ImgBg = styled.div`
  display: inline-block;
  background: url(${props => props.url}) no-repeat;
  width: 389px;
  height: 209px;
  padding: 30px 52px;
  margin-top: 8%;
  margin-left: ${props => props.left};
  &:hover{
    cursor: pointer;
    &>div {
      background: url(${props => props.hoverSrc}) no-repeat !important;
    };
    &>span {
      color: var(--primary-blue);
    }
  }
`

export const DescText = styled.p`
  display: flex;
  color: #E5272F;
  font-size: 14px;
  margin-top: 18px;
  justify-content: center;
`